<template>
    <div class="big-box">
        <star></star>
        <div class="header">
            <div class="menuTab">
                <div class="menuTab-name" @click="$router.go(-1)">返回</div>
            </div>
            <div class="backButton" @click="goBack"></div>
            <img src="../../../../../assets/bigScreen/star-title-bg.png" alt="" />
            <div class="head-l">
                <img src="../../../../../assets/bigScreen/time.png" alt="" />
                <span>{{ dates }}</span>
            </div>
            <div class="backBox" @click="goBack"></div>
        </div>

        <div class="content">
            <div class="content-left">
                <div class="content-left-item">
                    <div class="h4s">
                        <div class="tit-l">星创天地盟市分布</div>
                        <div class="tit-r"><!-- <div class="more">查看更多</div> --></div>
                    </div>
                    <div class="msfbWaper animate__animated animate__fadeInUp" style="height: calc(100% - 4.5rem);">
                        <msfb v-if="spLinexData.length != 0 && spLinesData.length != 0" :xData="spLinexData"
                            :sData="spLinesData"></msfb>
                    </div>
                </div>
                <div class="content-left-item">
                    <div class="h4s">
                        <div class="tit-l">星创天地设立年度</div>
                        <div class="tit-r"><!-- <div class="more">查看更多</div> --></div>
                    </div>
                    <div class="lineWaper animate__animated animate__fadeInUp" style="height: calc(100% - 4.5rem);">
                        <hxaingbian :xData="linexData" :sData="linesData" v-if="linexData.length && linesData.length"></hxaingbian>
                    </div>
                </div>
            </div>

            <div class="content-right">
                <div class="datalistwaper animate__animated animate__fadeInUp">
                    <div class="dataList">
                        <div class="listTitle">
                            <div class="listTitle-item" v-for="(item, index) in tableColumns" :key="index">{{ item }}</div>
                        </div>
                        <div class="scroll-box-waper">
                            <div class="scroll-box" :style="{ animationDuration: `${ scrollTime }s` }">
                                <div class="tableBody" v-for="(item, index) in tableList" @click="getDetail(item)" :key="index">
                                    <div class="tableBody-item" v-for="(info, value) in fieldNameList" :key="value">
                                        <!-- <transition enter-active-class="animate__animated animate__bounceOut" leave-active-class="animate__animated animate__fadeOutUp"> -->
                                            {{ item[info] ? item[info].length > 30 ? item[info].slice(0, 30) + '...' : item[info] : '' }}
                                        <!-- </transition> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" v-if="isshow">
            <div class="modal-content">
                <div class="content-title" @click="isshow = false">
                    <div>团队详情</div>
                </div>
                <div class="content-infoBox">
                    <div class="infoBox-img">
                        <img v-if="detail.image" :src="detail.image[0] == '/' ? baseUrl + detail.image : detail.image" alt="暂无图片" />
					    <img v-else-if="detail.logo" :src="detail.logo[0] == '/' ? baseUrl + detail.logo : detail.logo" alt="暂无图片" />
					    <img v-else-if="detail.photo" :src="detail.photo[0] == '/' ? baseUrl + detail.photo : detail.photo" alt="暂无图片" />
					    <img src="../../../../../assets/photo.png" v-else />
                    </div>
                    <div class="textBox">
                        <div class="name">{{ detail.name }}</div>
                        <div class="deptName">申报单位：{{ detail.supportUnit || detail.unit }}</div>
                        <div class="cityName">创新领域：{{ detail.fields || detail.innovationAreas }}</div>
                        <div class="countryName">所在盟市：{{ detail.manage || detail.organizationName }}</div>
                    </div>
                </div>
                <div class="introduction-title">
                    <div class="title-line"></div>
                    <div class="title-text">团队简介</div>
                </div>
                <div class="introduction-box">{{ detail.unitInnovations || '暂无' }}</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import hxaingbian from "./components/hxaingbian.vue";
import msfb from "./components/msfb.vue";
import { getStarCityData, getStarYearData, getStarListData } from '../../../../../api/screenProjectIncubation.js'
import star from '../childComponent/stat.vue'

const router = useRouter()
const route = useRoute()

const spLinesData = ref([])
const spLinexData = ref([])
const linexData = ref([])
const linesData = ref([])

const isshow = ref(false)
const scrollTime = ref(400)

const tableList = ref([])
const tableColumns = ref([])
const fieldNameList = ref([])
const detailList = ref([])
const detail = ref(undefined)

const initData = () => {
    getStarCityData().then(res => {
        if(res.code == 200) {
            let data = res.data
            data.map(item => {
                spLinexData.value.push(item.orgName)
                spLinesData.value.push(item.count)
            })
        }
    })

    getStarYearData().then(res => {
        if(res.code == 200) {
            let data = res.data
            data.map(item => {
                linexData.value.push(item.type)
                linesData.value.push(item.count)
            })
        }
    })

    getStarListData().then(res => {
        if(res.code == 200) {
            tableList.value = res.data.result
            tableColumns.value = res.data.fieldName
            fieldNameList.value = res.data.field
            // detailList.value = res.data.detail
        }
    })
}

const getDetail = (data) => {
    // isshow.value = true
    // detailList.value.map(item => {
    //     if(data.id == item.id) {
    //         detail.value = item
    //     }
    // })
    // console.log(detail.value);
}

const dates = ref('')
const check = (val) => {
    if (val < 10) {
        return "0" + val;
    } else {
        return val;
    }
}
const start = () => {
    setInterval(() => {
        displayTime();
    }, 1000); //单位是毫秒
}
const displayTime = () => {
    //获取系统当前的年、月、日、小时、分钟、毫秒
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    let hour = date.getHours()
    let minutes = date.getMinutes()
    let seconds = date.getSeconds()
    dates.value = `${year}年${month}月${day}日 ${check(hour)}:${check(minutes)}:${check(seconds)}`
}

const goBack = () => {
    router.push('/chart')
}

onMounted(() => {
    initData()
    start()
});

</script>
<style lang="scss" scoped>
.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.1);

    .modal-content {
        width: 75.8rem;
        height: 52.4rem;
        background: url("../../../../../assets/bigScreen/modal-bg.png") no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        padding: 2.4rem 2.8rem;

        .content-title {
            display: flex;
            align-items: center;
            width: 100%;
            height: 4.4rem;
            background: url("../../../../../assets/bigScreen/modal-title-bg.png") no-repeat;
            background-position: center center;
            background-size: 100% 100%;
            color: #ffffff;
            font-size: 2rem;
            padding-left: 4rem;
        }

        .content-infoBox {
            display: flex;
            justify-content: left;
            align-items: center;
            background: rgba(14, 41, 77, 0.4);
            border: 1px solid rgba(45, 204, 255, 0.13);
            padding: 2rem;
            margin-top: 2.2rem;
            border-radius: 3px;

            .infoBox-img {
                width: 12.4rem;
                height: 12.4rem;
                border-radius: 50%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .textBox {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 2.7rem;
                width: 80%;

                .name {
                    font-size: 2rem;
                    color: #25c1ff;
                }

                .subInfo {
                    font-size: 1.4rem;
                    color: #ffffff;
                }

                .deptName {
                    font-size: 1.4rem;
                    color: #ffffff;
                }

                .cityName {
                    font-size: 1.4rem;
                    color: #ffffff;
                }

                .countryName {
                    font-size: 1.4rem;
                    color: #ffffff;
                }
            }
        }

        .introduction-title {
            display: flex;
            justify-content: left;
            align-items: center;
            margin-top: 2rem;

            .title-line {
                width: 0.4rem;
                height: 1.9rem;
                background: #25c1ff;
            }

            .title-text {
                font-size: 1.8rem;
                color: #25c1ff;
                margin-left: 0.5rem;
            }
        }

        .introduction-box {
            height: 17.2rem;
            font-size: 1.4rem;
            color: #d6d6d6;
            margin-top: 1.7rem;
            overflow: scroll;
        }

        .introduction-box::-webkit-scrollbar { 
            display: none;
        }
    }
}

@font-face {
    font-family: "ffa";
    src: url(../../../../../assets/bigScreen/fonts/优设标题黑.ttf);
}

@font-face {
    font-family: "ffas";
    src: url(../../../../../assets/bigScreen/fonts/DS-DIGIBs.TTF);
}

.scroll-box {
    animation: 5s wordsLoop linear infinite normal;
}

.scroll-box:hover {
    animation-play-state: paused;
}

.noAnimation {
    animation: unset !important;
}

@keyframes wordsLoop {
    0% {
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }

    20% {
        transform: translateY(-20%);
        -webkit-transform: translateY(-20%);
    }

    40% {
        transform: translateY(-40%);
        -webkit-transform: translateY(-40%);
    }

    60% {
        transform: translateY(-60%);
        -webkit-transform: translateY(-60%);
    }

    80% {
        transform: translateY(-80%);
        -webkit-transform: translateY(-80%);
    }

    100% {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
    }

    80% {
        transform: translateY(-80%);
        -webkit-transform: translateY(-80%);
    }

    60% {
        transform: translateY(-60%);
        -webkit-transform: translateY(-60%);
    }

    40% {
        transform: translateY(-40%);
        -webkit-transform: translateY(-40%);
    }

    20% {
        transform: translateY(-20%);
        -webkit-transform: translateY(-20%);
    }

    0% {
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }
}

.datalistwaper {
    width: 70vw;
    height: 100%;
    opacity: 1;
    margin-left: 3.4rem;
    //   background: rgba(14, 41, 77, 0.4);

    //   box-sizing: border-box;
    //   border: 1px solid rgba(45, 204, 255, 0.13);
    .dataList {
        height: 100%;
        width: 100%;

        .listTitle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(3, 122, 255, 0.28);
            padding: 1.8rem 3rem;
            height: 6rem;
            line-height: 6rem;
    
            .listTitle-item {
                flex: 1;
                font-size: 1.6rem;
                color: #ffffff;
                text-align: center;
            }

            .listTitle-item:nth-child(1) {
                flex: 2;
            }
        }

        .scroll-box-waper {
            height: calc(100% - 6rem);
            overflow: hidden;
        }

        .scroll-box {
            .tableBody {
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 1.8rem 3rem;
                border-bottom: 1px solid rgba(3, 122, 255, 0.2784);

                .tableBody-item {
                    flex: 1;
                    // width: 12.5%;
                    font-size: 1.6rem;
                    color: #ffffff;
                    text-align: center;
                }

                .tableBody-item:nth-child(1) {
                    flex: 2;
                }
            }
        }
    }
}

.big-box {
    background-color: #071c3b;
    height: 100vh;
    overflow: hidden;
    // background: url("../../../assets/bigScreen/new-person-bg.jpg") no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

.h4s {
    height: 4.5rem;
    line-height: 4.5rem;
    background-image: url("../../../../../assets/bigScreen/title-bg4.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.6rem 0.3rem 4.7rem;
    box-sizing: border-box;
    font-family: "ffa";

    .tit-l {
        font-size: 1.8rem;
        font-weight: normal;
        line-height: 2.6rem;
        letter-spacing: 0;
        color: #ffffff;
        text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);

        span {
            font-size: 1.4rem;
            letter-spacing: 0;
            color: rgba(255, 255, 255, 0.62);
            margin-left: 1.8rem;
        }
    }

    .tit-r {
        display: flex;
        align-items: center;
    }

    .more {
        font-size: 1.2rem;
        font-weight: normal;
        line-height: 2.6rem;
        letter-spacing: 0rem;
        color: rgba(255, 255, 255, 0.8);
        text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);
        cursor: pointer;
    }
}

.h4s-ts {
    background-image: url("../../../../../assets/bigScreen/title-bg31.png");
}

.h4s-ts2 {
    background-image: url("../../../../../assets/bigScreen/title-bg32.png");
}

.header {
    text-align: center;
    position: relative;
    // height: 19.1rem;
    // height: 11rem;

    .backBox {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 70rem;
        height: 10rem;
        cursor: pointer;
    }

    .menuTab {
        position: absolute;
        top: 5.5rem;
        left: 30rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;

        .menuTab-name {
            width: 9rem;
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url("../../../../../assets/bigScreen/menu-tab.png") no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }
    }

    .backButton {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30%;
        height: 100%;
        cursor: pointer;
    }

    >img {
        width: 100%;
        max-height: 100%;
        margin-top: -1.1rem;
    }

    .head-l {
        position: absolute;
        top: 6rem;
        left: 3rem;
        font-size: 1.8rem;
        font-weight: normal;
        letter-spacing: 0em;
        color: #fff;
        display: flex;
        align-items: center;

        img {
            width: 2.4rem;
            height: 2.4rem;
            margin-right: 0.6rem;
        }
    }

    .head-r {
        position: absolute;
        top: 6rem;
        right: 3rem;
        display: flex;

        li {
            font-size: 1.8rem;
            font-weight: normal;
            line-height: 2.5rem;
            letter-spacing: 0;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;

            span {
                color: #071c3b;
                margin: 0 0.5rem;
            }
        }

        .act {
            color: #00eefd;

            span {
                color: #00eefd;
            }
        }
    }
}

.content {
    display: flex;
    margin-top: -5rem;
    height: calc(100% - 13rem);

    .content-left {
        width: 45.8rem;
        margin-left: 1.2rem;
        display: flex;
        flex-direction: column;
        height: 100%;

        .content-left-item {
            height: 50%;
            padding-bottom: 1rem;
        }

        .msfbWaper {
            width: 100%;
            height: 37vh;
            background: rgba(2, 21, 54, 0.45);
            box-sizing: border-box;
            border: 1px solid rgba(45, 204, 255, 0.13);
            padding: 2rem;
        }

        .lineWaper {
            width: 100%;
            height: 37vh;
            background: rgba(2, 21, 54, 0.45);
            border: 1px solid rgba(45, 204, 255, 0.13);
            padding: 2rem;
        }
    }

    .content-right {
        height: 100%;
        padding-bottom: 1rem;
    }
}</style>
